<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title>canvas</title>
    <style>
        body{
            padding:0;
            margin:0;
        }
        canvas{
            background:#eee;
            padding:0;
        }
        div{
            color: #000;
            background: #ddd;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src='../js/utils.js'></script>
    <script src='../js/spaceship.js'></script>
    <script>
         window.onload = function(){
          var canvas = document.getElementById('canvas'),
              context = canvas.getContext('2d');

              canvas.width = document.body.clientWidth;
            canvas.height = window.screen.availHeight*0.8;

          var spaceShip = new SpaceShip();
              spaceShip.x = canvas.width/2;
              spaceShip.y = canvas.height/2;
          
         //初始化
          var vr = 0,
              vx = 0,
              vy = 0,
              ax = 0,
              ay = 0,
              angle = 0,
              thrust = 0;
              
          //通过方向键控制各变量的值
          window.addEventListener('keydown',function(event){
              console.log(event.keyCode)
              switch (event.keyCode){
                  case 37:    //left
                      vr = -3;
                      vx = 0;
                      vy = 0;
                      break;
                   case 65:    //left
                      vr = -3;
                      vx = 0;
                      vy = 0;
                      break;
                  case 39:  //right
                      vr = 3;
                      vx = 0;
                      vy = 0;
                      break;
                   case 68:  //right
                      vr = 3;
                      vx = 0;
                      vy = 0;
                      break;
                  case 38: //up
                      spaceShip.showFlame = true;
                      thrust = 0.05;
                      break;
                  case 87: //up
                      spaceShip.showFlame = true;
                      thrust = 0.05;
                      break;
                  case 40:
                      ax = 0;
                      ay = 0;
                      vx = 0;
                      vy = 0;
                      break;
                  case 83:
                      ax = 0;
                      ay = 0;
                      vx = 0;
                      vy = 0;
                      break;
              }
          }, false);

          window.addEventListener('keyup', function(event){
               vr = 0;
               thrust = 0;
               spaceShip.showFlame = false;
          }, false);

          (function drawFrame(){
              window.requestAnimationFrame(drawFrame, canvas);
              context.clearRect(0, 0, canvas.width, canvas.height);
              
              //角度
              spaceShip.rotation += vr *Math.PI/180;
              
              angle = spaceShip.rotation;
              ax = Math.cos(angle)*thrust;
              ay = Math.sin(angle)*thrust;
              
              vx += ax;
              vy += ay;
          
              spaceShip.x += vx;
              spaceShip.y += vy;


              //核心部分 边界环绕
               if(spaceShip.x - spaceShip.width/2 > canvas.width){
                   spaceShip.x = 0;
               }
               if(spaceShip.x < 0){
                   spaceShip.x = canvas.width;
               }
               if(spaceShip.y - spaceShip.height/2> canvas.height){
                   spaceShip.y = 0;
               }
               if(spaceShip.y <0){
                   spaceShip.y = canvas.height;
               }
              
              spaceShip.draw(context);

          }());


          /*
            //任意方向速度
            vx = speed * Math.cos(angle);
            vy = speed * Math.sin(angle);

            //任意方向加速度
            ax = force * Math.cos(angle);
            ay = force * Math.xin(angle);

            //改变速度
            vx += ax;
            vx += ay;

            //改变位置
            object.x += vx;
            object.y += vy;
          */
      }
    </script>
</body>
</html>
